<template>
  <view class="reuse">
    <view class="top">
      <view class="miaosha">
        <view class="btitle">
          秒杀专场
        </view>
        <u-count-down :timestamp=" miaoshagoods.miaoshalist.timestamp" @change="onChange">
          <view class="time">
            <view class="time">
              <view class="time__custom">
                <text class="time__custom__item">{{ timeData.days>=10?timeData.days:'0'+timeData.days}}</text>
              </view>
              <text class="time__doc" style="margin-top: 5rpx;">天</text>
              <view class="time__custom">
                <text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
              </view>
              <text class="time__doc">:</text>
              <view class="time__custom">
                <text class="time1__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}</text>
              </view>
              <text class="time__doc">:</text>
              <view class="time__custom">
     <text class="time1__item">{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}</text>
              </view>
            </view>
          </view>
        </u-count-down>
      </view>

      <navigator class="right" url="/subPack/Seckill/Seckill">
        更多
        <view class="arrow">
          <u-icon name="arrow-right" color="#999999" size="25rpx"></u-icon>
        </view>
      </navigator>
    </view>
    <view class="hul">
      <view class="hli" v-for="(item,index) in miaoshagoods.miaoshalist.slice(0,3)" :key="index"> 

        <view class="hleft">
          <image :src="item.image_url" mode=""></image>
          <view class="overlay">
            <u-count-down :timestamp="item.timestamp" @change="onChange">
              <view class="time1">
                <text class="time1__item">{{ timeData.days>=10?timeData.days:'0'+timeData.days }}天</text>
                <text class="time1__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                <text class="time1__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}:</text>
                <text class="time1__item">{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}} 结束</text>
              </view>
            </u-count-down>
          </view>
        </view>
        <view class="hright">
          <view class="htitle">
            {{item.name}}
          </view>
          <view class="schedule" >
            <u-line-progress height="20" :percent="item.percent" activeColor="#ff0000" :striped-active="true"></u-line-progress>
          </view>
          <view class="prices">
            <view class="price">
              ￥{{item.unit_price}}
            </view>
            <view class="delprice">
              ￥{{item.discount_price}}
            </view>
          </view>
          <view class="hbutton" >
            <u-button :custom-style="customStyle" color="red" size="mini" :plain="true"  shape="circle" @click="tiaozhuan(item.id)" >
              立即秒杀
            </u-button>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref
  } from 'vue'
  import {
    goodsStore
  } from "../../store/goods.js"

  const goodStore = goodsStore()
  const {
    miaoshagoods
  } = goodStore
  //获取秒杀数据
  goodStore.getmiaoshagoods()
  //立即砍价秒杀样式
  const customStyle = reactive({
    marginTop: '60rpx',
    color: '#ff4444',
    fontSize: '25rpx'
  })
  const timeData = ref({})
  function onChange(e) {
    if(e.days===0 & e.hours===0 & e.minutes===0 &  e.seconds===0 ){
      if(miaoshagoods.status!=='padding')
      goodStore.getmiaoshagoods()
    }
    timeData.value = e
  }
  //跳转页面
 function tiaozhuan(goodid){
   uni.navigateTo({
     url: `/subPack/miaoshagoods/miaoshagoods?goods_id=${goodid}`
   })
 }
</script>

<style scoped lang="scss">
  .time {
    margin-left: 10rpx;
    margin-top: -5rpx;
    display: flex;
    align-items: center;

    &__custom {
      margin-top: 4px;
      width: 20px;
      height: 20px;

      background-color: #f23030;
      border-radius: 4px;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      justify-content: center;
      align-items: center;

      &__item {
        color: #fff;
        font-size: 12px;
        text-align: center;
      }
    }

    &__doc {
      color: #f23030;
      padding: 2rpx 8rpx;
      font-size: 25rpx
    }


  }

  .time1 {
    color: #ffffff;
    text-align: center;

    &__item {
      color: #ffffff;
      font-size: 24rpx;

    }
  }

  .reuse {
    margin-top: 20rpx;
    background-color: #ffffff;
    padding: 0rpx 20rpx;
    padding-bottom: 20rpx;

    .top {
      display: flex;
      height: 120rpx;
      line-height: 120rpx;
      justify-content: space-between;

      .miaosha {
        display: flex;

        justify-content: space-between;

        .btitle {
          font-size: 35rpx;
          font-weight: 700;
          text-align: center;
        }
      }

      .right {
        font-size: 25rpx;
        color: #999999;

        .arrow {
          display: inline-block;
        }
      }
    }


    .hul {
      .hli:nth-child(n+2) {
        margin-top: 20rpx;
      }

      .hli {
        display: flex;
        border-radius: 10rpx;
        box-shadow: 2rpx 2rpx 10rpx 2rpx #dadada;

        .hleft {
          margin: 10rpx;
          height: 220rpx;
          position: relative;

          image {
            border-radius: 10rpx;
            width: 220rpx;
            height: 220rpx;
          }

          .overlay {
            border-radius: 0 0 10rpx 10rpx;
            position: absolute;
            top: 80%;
            left: 0;
            width: 100%;
            height: 20%;

            background-color: rgba(0, 0, 0, 0.5);
            /* 设置遮罩层颜色和透明度 */
          }
        }

        .hright {
          position: relative;
          padding-right: 50rpx;
          padding-left: 20rpx;

          .htitle {
            margin-top: 30rpx;
            font-size: 32rpx;
            color: #353535;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          .schedule {
            margin-top: 10rpx;
            width: 300rpx;
          }

          .prices {
            position: absolute;
            bottom: 20rpx;

            .price {
              display: inline-block;
              font-size: 35rpx;
              color: #f23030;
            }

            .delprice {
              display: inline-block;
              margin-left: 10rpx;
              left: 110rpx;
              font-size: 25rpx;
              text-decoration: line-through;
              color: #999999;
            }
          }

          .hbutton {
            position: absolute;
            bottom: 20rpx;
            right: 20rpx;
          }
        }
      }
    }
  }
</style>